<template>
	<view class="followlist">
		<scroll-view scroll-y="true" @scroll="scroll" show-scrollbar="false" style="height: 100%;">
			<view class="follow_box" v-for="(item,index) in list" :key="item.id" >
				<view class="top">
					<view class="author_desc">
						<view class="author_img">
							<image class="img" :src="ip+'/img/none.jpg'" mode=""></image>
						</view>
						<view class="author_name">
							{{item.author}}
						</view>
					</view>
					<view class="fenxiang iconfont icon-gengduo">
					</view>
				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="video-box" @click="goToPlay(index)">
					<follow-player :videoitem="item.src" @oClick="oc" :index="index" ref="videodom"></follow-player>
					<view class="music-box">
						<view class="icon-music iconfont icon-douyin"></view>
						<view class="music">
							<view class="music-name" :style="'animation-play-state:'+dataQuery">演员-薛之谦演员-薛之</view>
						</view>
					</view>
				</view>
				<view class="desc-box">
					<view class="left">
						3-20
					</view>
					<view class="right">
						<view class="item iconfont icon-zhuanfa00">
							分享
						</view>
						<view class="item iconfont icon--pinglun">
							评论
						</view>
						<view class="item iconfont icon-aixin">
							赞
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="comment_num">
						4.2w评论过
					</view>
					<view class="comment_box">
						<icon class="icon_pen iconfont icon-bianji"></icon>
						<textarea class="input " type="text" placeholder="留下你的评论" />
					</view>
				</view>
			</view>
	
		</scroll-view>
		
	</view>
</template>

<script>
	import t from '../common/helper.js'
	import FollowPlayer from './Followplayer.vue';
	
	var timer = null;
	export default {
		name:"FollowList",
		components: {
			FollowPlayer,
		},
		data() {
			return {
				ip: t.o,
				window_height: '',
				index: -1,//当前播放视频下标
				dataQuery: 'paused'
			};
		},
		props: [ 'list' ],
		watch: {
			index() {
				if(this.index > 0 && this.index < this.list.length-1) {
					this.$refs.videodom[this.index-1].pause();
					this.$refs.videodom[this.index+1].pause();
					this.$refs.videodom[this.index].player();
				}else if(this.index == this.list.length-1) {
					this.$refs.videodom[this.index-1].pause();
					this.$refs.videodom[this.index].player();
				}else if(this.index == 0) {
					this.$refs.videodom[this.index+1].pause();
					this.$refs.videodom[this.index].player();
				}
			}
			
		},
		methods: {

			// sc滚动事件
			scroll(e) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					this.index = Math.floor(e.detail.scrollTop/(650-this.window_height*1/5));
				}, 100);
			},

			goToPlay(index) {
				uni.setStorage({
					key: 'videolist',
					data: this.list,
					success: (res) => {
							uni.navigateTo({
								url: "/pagesB/player/player?index="+index,
							})
					}
				})
			},
			//动画控制
			oc() {
				this.dataQuery = this.dataQuery == 'running' ? 'paused' : 'running';
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.window_height = res.windowHeight;
				}
			});
		},
	}
</script>

<style lang="scss">
	.followlist {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 90px;
		color: #FFFFFF;
		.follow_box {
			margin: 0 20px;
			height: 650px;
			.top {
				height: 50px;
				line-height: 50px;
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				.author_desc{
					
					.author_img {
						display: inline-block;
						.img {
							width: 30px;
							height: 30px;
							border-radius: 50%;
							vertical-align: middle;
						}
					}
					.author_name {
						display: inline-block;
						margin-left: 10px;
					}
				}
				.fenxiang {
					font-size: 18px;
				}
			}
			.title {
				height: 25px;
				line-height: 25px;
				margin: 10px 0 5px;
				font-size: 14px;
			}
			.video-box {
				width: 100%;
				height: 350px;
				position: relative;
				.music-box {
					z-index: 20;
					position: absolute;
					left: 10px;
					bottom: 10px;
					height: 25px;
					line-height: 25px;
					.icon-music {
						z-index: 30;
						position: absolute;
						left: 0px;
						top: 0;
					}
					.music {
						width: 150px;
						overflow: hidden;
						position: relative;
						margin-left: 20px;
						.music-name {
							animation: music 6s linear infinite; 
							width: 250px;
						}
						@keyframes music{
							0%{
								transform: translate3d(80%,0,0);
							}
							100% {
								transform: translate3d(-80%,0,0);
							}
						}
					}
				}
			}
			.desc-box {
				margin-top: 25px;
				height: 25px;
				line-height: 25px;
				.left {
					float: left;
					color: #555555;
					font-size: 14px;
				}
				.right {
					float: right;
					display: flex;
					justify-content: space-between;
					width: 200px;
					.item {
						position: relative;
						padding-left: 30px;
						&::before {
							position: absolute;
							left: 0;
							font-size: 25px;
						}
					}
				}
			}
			.comment {
				padding: 0 5px;
				width: 100%;
				border-radius: 3px;
				background-color:	#101010;
				.comment_num {
					margin: 10px 0;
					width: 100%;
					height: 40px;
					line-height: 40px;
					font-size: 15px;
					color: #AAAAAA;
				}
				.comment_box {
					position: relative;
					padding-bottom: 50px;
					.icon_pen {
						position: absolute;
						left: 0;
						top: 0;
						transform: translateY(-7px);
					}
					.input {
						margin-left: 20px;
						line-height: 20px;
						height: 50px;
					}
				}
			}
		}
	}
</style>
